<template>
  <div class="markdown-renderer prose prose-sm max-w-none" v-html="renderedContent"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { marked } from 'marked'

interface Props {
  content: string
}

const props = withDefaults(defineProps<Props>(), {
  content: ''
})

const renderedContent = computed(() => {
  if (!props.content) return '<p class="text-gray-500">暂无内容</p>'

  return marked(props.content, {
    breaks: true,
    gfm: true
  })
})
</script>

<style scoped>
.markdown-renderer {
  @apply text-gray-900 leading-relaxed;
}

.markdown-renderer :deep(h1) {
  @apply text-2xl font-bold mt-8 mb-4 text-gray-900 border-b border-gray-200 pb-2;
}

.markdown-renderer :deep(h2) {
  @apply text-xl font-semibold mt-6 mb-3 text-gray-900;
}

.markdown-renderer :deep(h3) {
  @apply text-lg font-semibold mt-4 mb-2 text-gray-800;
}

.markdown-renderer :deep(h4) {
  @apply text-base font-semibold mt-3 mb-2 text-gray-800;
}

.markdown-renderer :deep(p) {
  @apply mb-4 text-gray-700;
}

.markdown-renderer :deep(ul), .markdown-renderer :deep(ol) {
  @apply mb-4 pl-6;
}

.markdown-renderer :deep(li) {
  @apply mb-2 text-gray-700;
}

.markdown-renderer :deep(blockquote) {
  @apply border-l-4 border-gray-300 pl-4 py-2 mb-4 bg-gray-50 italic text-gray-600;
}

.markdown-renderer :deep(code) {
  @apply bg-gray-100 text-gray-800 px-2 py-1 rounded text-sm font-mono;
}

.markdown-renderer :deep(pre) {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.markdown-renderer :deep(pre code) {
  @apply bg-transparent p-0 text-inherit;
}

.markdown-renderer :deep(table) {
  @apply w-full border-collapse border border-gray-300 mb-4;
}

.markdown-renderer :deep(th), .markdown-renderer :deep(td) {
  @apply border border-gray-300 px-4 py-2 text-left;
}

.markdown-renderer :deep(th) {
  @apply bg-gray-50 font-semibold text-gray-900;
}

.markdown-renderer :deep(a) {
  @apply text-blue-600 hover:text-blue-700 underline;
}

.markdown-renderer :deep(strong) {
  @apply font-semibold text-gray-900;
}

.markdown-renderer :deep(em) {
  @apply italic text-gray-800;
}

.markdown-renderer :deep(hr) {
  @apply border-t border-gray-300 my-6;
}
</style>